<template>
	<view class="custom_popup" :class="{ popup_show: showPopup }">
		<view class="popup_mask" @click="showPopup = false"></view>
		<view class="popup_content">
			<text class="popup_share_title">{{title}}</text>
			<view class="search_input">
				<input type="text" style="width: calc(100% - 120upx);" @input="searchSchoolList"
				 placeholder="请输入关键词进行搜索" />
			</view>
			<scroll-view scroll-y="true" class="schoolList" @scrolltolower="scroll">
				<radio-group v-if="popupList.length>0" @change="changeItem">
					<label v-for="(item,index) in popupList" :key="index" class="item">
						<text>{{item.orgName}}</text>
						<radio color="#007AFF" :value="item.orgId+''" :checked="indexValue == item.orgId"/>
					</label>
				</radio-group>
				<view v-else class="no-content">
					<text>无相关数据</text>
				</view>
			</scroll-view>
			<view class="popup_share_btn">
				<text class="" @click="showPopup = false;selectName=''">取消</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryOrg
	} from '../../common/api/index.js'
	import {_showToast, _showLoading} from '../../common/js/util.js'
	/**
	 * @Author: NXJ
	 */
	export default {
		name: 'CustomTabs',
		props: {
			value: {
				type: [Boolean, String],
				default: false
			},
			title: {
				type: String,
				default: '请选择'
			},
			parentId: {
				type: [Number, String],
				default: '45'
			}
		},
		data() {
			return {
				showPopup: false,
				popupTitle: '请选择',
				parentIdPrefix: '45',
				popupList: [],
				itemName: '',
				timer: null,
				indexValue: '',
				totalList: [],
				speedNum: 50,
				numCount: 0,
				currentPage: 1,
				pageSize: 20,
				searchValue: ''
			};
		},
		watch: {
			value(newVal) {
				this.showPopup = newVal
			},
			title(newTitle) {
				this.popupTitle = newTitle
			},
			parentId(newId) {
				this.parentIdPrefix = newId+''
				this.getList("")
			},
			showPopup(newVal){
				this.$emit("input",newVal);
			},
			searchValue(newValue, oldValue) {
				if(newValue != oldValue) {
					this.currentPage = 1
					this.popupList = []
				} else if(newValue == '') {
					this.currentPage = 1
				}
			}
		},
		mounted() {
			this.getList("")
		},
		methods: {
			scroll() {
				this.currentPage += 1
				this.getList(this.searchValue)
				// this.numCount += 1
				// this.popupList = this.popupList.concat(this.totalList.slice(this.speedNum*this.numCount, this.speedNum*(Number(this.numCount) + 1)));
			},
			// 查询学校组织
			searchSchoolList(e) {
				clearTimeout(this.timer)
				this.searchValue = e.detail.value
				this.timer = setTimeout(() => {
					this.getList(e.detail.value)
				}, 600)
			},
			changeItem(e) {
				const items = this.popupList.filter(item => {
					return item.orgId == e.detail.value
				})[0]
				this.itemName = '';
				this.indexValue = e.detail.value
				this.showPopup = false;
				this.$emit('change', { ...items })
			},
			clearItem() {
				this.indexValue = ''
			},
			getList(name) {
				_showLoading('加载中...')
				queryOrg({
					orgName: name,
					parentIdPrefix: this.parentIdPrefix,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				}).then(res => {
					if (res.code == 0) {
						this.totalList = res.data;
						// this.popupList = this.totalList.slice(0, this.speedNum);
						this.popupList = this.popupList.concat(res.data);
						uni.hideLoading();
					} else {
						_showToast('出错了')
					}
					this.$nextTick(() => {
						setTimeout(() => {
							uni.hideLoading();
						}, 50)
					})

				}).catch(err => {
					_showToast('系统开小差了，请稍后尝试')
				})
			}
		}
	}
</script>

<style lang="scss">
	.custom_popup {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 199;
		display: none;
		&.popup_show{
			display: block;
		}
		.popup_mask {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba($color: #000000, $alpha: 0.3);
		}

		.popup_content {
			height: 90%;
			width: 100%;
			display: flex;
			position: absolute;
			bottom: 0;
			flex-direction: column;
			background-color: #FFF;
			border-top-right-radius: 36upx;
			border-top-left-radius: 36upx;
		}

		.search_input {
			height: 40rpx;
			padding: 30rpx 20rpx;
			border-bottom: 1px #f5f5f5 solid;
		}

		.schoolList {
			width: 100%;
			height: calc(100% - 300rpx);
			.no-content{
				padding: 100rpx 24rpx;
				text-align: center;
				color: #999;
				font-size: $font-size-base;
			}
		}

		.item {
			padding: 0 24upx;
			line-height: 100upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.popup_share_btn,
		.popup_share_title {
			height: 100rpx;
			line-height: 100rpx;
			font-weight: bolder;
			border-bottom: 1px #f5f5f5 solid;
			text-align: center;
			color: #333;
		}

		.popup_share_btn {
			display: flex;
			justify-content: space-around;
			color: #007AFF;
			border: none;
			border-top: 1px #f5f5f5 solid;

			text {
				width: 50%;
			}
		}
	}
</style>
